<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height: 50px;
				/* 边框、背景颜色：查选择器是否选中，效果是否正确 */
				bo rder: 1px solid black;
				background-color:#a1a1a1;
			}
			#body{
				width: 100%;
				height: 900px;
				background-color:#aaffff;
				position:relative;
				top: 200px;
			}
			#footer{
				width: 100%;
				height: 500px;
				background-color:#ffa4ec;
			}
		</style>
	</head>
	<body>
		<!-- 1，元素选择器：以元素名作为选择器，抓取元素
		2，伪类选择器：原选择器上附加效果。：hover 鼠标悬停
										  before 在	前 添加文本一般与content属性
										  after 在	后 添加文本一般与content属性
		3，类选择器：以1个或多个别名作为选择器，抓取元素【页面微调】
		
		
		
		
		
		
		
		⑥id选择器：用在页面结构搭建 【唯一性】
		      语法：html  前标记 id="header"  别名
			  css  #header           别名
		 -- id选择器与class选择器区别
		 搭建页面结构，根据中小范围微调
		 -->
		 <div id="header"></div>
		 <!-- 作业：网页主体 900px  页尾200px 颜色自定-->
		 <div id="body"></div>
		 <div id="footer"></div>
	</body>
</html>